<!--
 * @Author: jyq
 * @Date: 2023-01-08 14:23:28
 * @LastEditTime: 2023-01-10 11:16:11
 * @LastEditors: jyq
 * @Description: 添加朋友
 * @FilePath: \dcollege\src\views\contact\addfriend.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="main">
        <div class="header">
        <var-app-bar 
        title="添加朋友"
        text-color="black"
        color="white"
        title-position="center"
        >
    <template #left>
      <var-button
        color="transparent"
        text-color="black"
        round
        text
      >
        <var-icon name="chevron-left"  size="34" />
      </var-button>
    </template>
        </var-app-bar>
    </div>
    <div class="myinput">
        <svg t="1672721018422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2693" width="25" height="25"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" fill="#bfbfbf" p-id="2694" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>
        <input class="search" type="text" placeholder="学号/手机号"/>
    </div>
    <div class="ewm">
        <p class="p1">我的二维码:</p>
        <p class="p2">蔡敏敏</p>
        <div class="ewmicon">
            <svg t="1673315907024" class="ewm_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3676" width="17" height="17"><path d="M129 102h321c16.569 0 30 13.431 30 30v322c0 16.569-13.431 30-30 30H129c-16.569 0-30-13.431-30-30V132C99 115.431 112.431 102 129 102z m70.692 70.877c-16.569 0-30 13.432-30 30v180.246c0 16.568 13.431 30 30 30h179.616c16.569 0 30-13.432 30-30V202.877c0-16.568-13.431-30-30-30H199.692z m56.92 57.07h65.776c16.568 0 30 13.431 30 30v66.106c0 16.569-13.432 30-30 30h-65.776c-16.568 0-30-13.431-30-30v-66.106c0-16.569 13.432-30 30-30zM129 540h321c16.569 0 30 13.431 30 30v322c0 16.569-13.431 30-30 30H129c-16.569 0-30-13.431-30-30V570c0-16.569 13.431-30 30-30z m70.692 70.877c-16.569 0-30 13.432-30 30v180.246c0 16.568 13.431 30 30 30h179.616c16.569 0 30-13.432 30-30V640.877c0-16.568-13.431-30-30-30H199.692z m56.92 57.07h65.776c16.568 0 30 13.431 30 30v66.106c0 16.569-13.432 30-30 30h-65.776c-16.568 0-30-13.431-30-30v-66.106c0-16.569 13.432-30 30-30zM574 102h321c16.569 0 30 13.431 30 30v322c0 16.569-13.431 30-30 30H574c-16.569 0-30-13.431-30-30V132c0-16.569 13.431-30 30-30z m70.692 70.877c-16.569 0-30 13.432-30 30v180.246c0 16.568 13.431 30 30 30h179.616c16.569 0 30-13.432 30-30V202.877c0-16.568-13.431-30-30-30H644.692z m56.92 57.07h65.776c16.568 0 30 13.431 30 30v66.106c0 16.569-13.432 30-30 30h-65.776c-16.568 0-30-13.431-30-30v-66.106c0-16.569 13.432-30 30-30z" fill="#2F54EB" p-id="3677"></path><path d="M544 541m30 0l31 0q30 0 30 30l0 31q0 30-30 30l-31 0q-30 0-30-30l0-31q0-30 30-30Z" fill="#2F54EB" p-id="3678"></path><path d="M834 541m30 0l31 0q30 0 30 30l0 31q0 30-30 30l-31 0q-30 0-30-30l0-31q0-30 30-30Z" fill="#2F54EB" p-id="3679"></path><path d="M544 831m30 0l31 0q30 0 30 30l0 31q0 30-30 30l-31 0q-30 0-30-30l0-31q0-30 30-30Z" fill="#2F54EB" p-id="3680"></path><path d="M635 632m30 0l31 0q30 0 30 30l0 139q0 30-30 30l-31 0q-30 0-30-30l0-139q0-30 30-30Z" fill="#2F54EB" p-id="3681"></path><path d="M834 723m30 0l31 0q30 0 30 30l0 139q0 30-30 30l-31 0q-30 0-30-30l0-139q0-30 30-30Z" fill="#2F54EB" p-id="3682"></path><path d="M925 861v31c0 16.569-13.431 30-30 30H756c-16.569 0-30-13.431-30-30v-31c0-16.569 13.431-30 30-30h139c16.569 0 30 13.431 30 30z" fill="#2F54EB" p-id="3683"></path></svg>   
        </div>
    </div>
    <div class="myrow"></div>
    <div class="list">
        <var-cell class="mycell" border>
          <div class="icon">
            <svg t="1673319687241" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3829" width="22" height="22"><path d="M40.394823 391.378855a40.44597 40.44597 0 0 0 40.44597-40.445969v-245.747664a24.574766 24.574766 0 0 1 24.267582-24.267582H358.38206A40.44597 40.44597 0 1 0 358.38206 0.025701H105.108375A105.210718 105.210718 0 0 0 0.000051 105.134025v245.747663a40.44597 40.44597 0 0 0 40.394772 40.497167zM358.38206 943.133557H105.108375a24.574766 24.574766 0 0 1-24.267582-24.267582v-277.541267a40.44597 40.44597 0 0 0-80.840742 0v277.541267A105.210718 105.210718 0 0 0 105.108375 1023.974299H358.38206a40.44597 40.44597 0 1 0 0-80.840742zM983.553877 595.554206a40.394772 40.394772 0 0 0-40.44597 40.394772v282.916997a24.574766 24.574766 0 0 1-24.267582 24.267582h-267.506571a40.44597 40.44597 0 1 0 0 80.840742h267.506571A105.210718 105.210718 0 0 0 1023.948649 918.865975v-282.916997a40.394772 40.394772 0 0 0-40.394772-40.394772zM918.840325 0.025701h-267.506571a40.44597 40.44597 0 1 0 0 80.840742h267.506571a24.574766 24.574766 0 0 1 24.267582 24.267582v245.747663a40.44597 40.44597 0 1 0 80.840742 0v-245.747663A105.210718 105.210718 0 0 0 918.840325 0.025701zM983.553877 458.089106H40.394823a40.44597 40.44597 0 0 0 0 80.840742h943.159054a40.44597 40.44597 0 0 0 0-80.840742z" p-id="3830" fill="#ffffff"></path></svg>          
          </div>
          <p>扫一扫</p>
          <p class="list_p">扫描二维码名片</p>
          <template #extra>
            <var-icon class="right_icon" size="30" name="chevron-right" />
          </template>
        </var-cell>
        <var-cell class="mycell" border>
          <div class="icon_1">
            <svg t="1672806282662" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15157" width="25" height="25"><path d="M510.2 517c-3.8 0-7.7-0.6-11.5-2-40.2-14.5-74.2-40.9-98.2-76.4-30.1-44.5-41.1-98-31-150.7 10.1-52.8 40.2-98.4 84.7-128.5 44.4-30.1 98-41.1 150.7-31 52.7 10.1 98.4 40.2 128.5 84.7 62.2 91.8 38.1 217-53.7 279.3-13.5 9.2-28.1 16.6-43.4 22.3-17.5 6.5-37-2.5-43.4-20.1-6.5-17.5 2.5-37 20.1-43.4 10.1-3.7 19.9-8.7 28.8-14.8 60.9-41.3 76.9-124.4 35.6-185.3-20-29.5-50.3-49.5-85.3-56.2-34.9-6.7-70.5 0.6-100 20.6s-49.5 50.2-56.2 85.3c-6.7 35 0.6 70.5 20.5 100 15.9 23.5 38.5 41 65.2 50.7 17.6 6.3 26.7 25.7 20.3 43.3C537 508.4 524 517 510.2 517zM259.2 892.5c-18.7 0-33.8-15.1-33.8-33.8 0-137.8 59.3-302 341.6-302 51.9 0 98.5 5.5 138.5 16.5 18 4.9 28.6 23.6 23.7 41.6-4.9 18-23.5 28.5-41.6 23.7-34.2-9.3-74.8-14.1-120.7-14.1C380 624.4 293 698.9 293 858.8c0.1 18.6-15.1 33.7-33.8 33.7zM216.1 563.1c-13.8 0-26.7-8.5-31.7-22.1-6.5-17.5 2.5-37 20.1-43.4 10.1-3.7 19.8-8.7 28.8-14.8 60.9-41.3 76.9-124.4 35.6-185.3-24.9-36.7-66.2-58.6-110.6-58.6h-0.2c-13 0-25.9 1.9-38.3 5.7-17.8 5.5-36.7-4.7-42.2-22.6-5.4-17.9 4.7-36.8 22.6-42.2 18.7-5.6 38.2-8.6 57.8-8.6h0.2c66.9 0 129.2 33 166.7 88.3 30.1 44.5 41.1 98 31 150.7-10.1 52.8-40.2 98.4-84.7 128.5-13.5 9.2-28.1 16.7-43.4 22.3-3.9 1.4-7.9 2.1-11.7 2.1z" fill="#ffffff" p-id="15158" data-spm-anchor-id="a313x.7781069.0.i11" class="selected"></path><path d="M253.4 678.4c-1.9 0-3.9-0.2-5.9-0.5-26.6-4.7-56.6-7.1-89.1-7.1-20.3 0-39.8 0.9-57.8 2.8-18.7 1.6-35.2-11.7-37.1-30.2-1.9-18.6 11.6-35.2 30.2-37.1 20.3-2 42-3.1 64.6-3.1 36.5 0 70.4 2.7 100.9 8.1 18.4 3.2 30.7 20.8 27.4 39.2-2.8 16.3-17.1 27.9-33.2 27.9zM898.3 547.8c-3.8 0-7.7-0.6-11.5-2-35.1-12.6-64.8-35.7-85.7-66.7-26.3-38.8-35.9-85.5-27.1-131.6 8.9-46 35.1-85.9 73.9-112.2 18.4-12.5 38.7-21.3 60.3-26.1 18.3-3.9 36.3 7.4 40.4 25.7 4.1 18.2-7.4 36.3-25.7 40.4-13.2 2.9-25.7 8.3-37.1 16-23.9 16.2-40 40.7-45.4 68.9-5.5 28.3 0.5 57 16.6 80.9 12.9 19 31.1 33.2 52.7 41 17.6 6.3 26.7 25.7 20.4 43.3-5 13.9-18 22.4-31.8 22.4zM685.7 899.4c-18.7 0-33.8-15.1-33.8-33.8 0-114.6 47.5-252.7 273.5-260.7 19-1.6 34.3 13.9 35 32.6 0.6 18.7-14 34.4-32.6 35-142 5-208.2 66.3-208.2 193.1-0.1 18.7-15.2 33.8-33.9 33.8z" fill="#ffffff" p-id="15159" data-spm-anchor-id="a313x.7781069.0.i10" class="selected"></path></svg>          </div>
          <p>发起群聊</p>
          <p class="list_p">同多个同学聊天</p>
          <template #extra>
            <var-icon class="right_icon" size="30" name="chevron-right" />
          </template>
        </var-cell>
        <var-cell class="mycell">
          <div class="icon_2">
            <svg t="1672806282662" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15157" width="25" height="25"><path d="M510.2 517c-3.8 0-7.7-0.6-11.5-2-40.2-14.5-74.2-40.9-98.2-76.4-30.1-44.5-41.1-98-31-150.7 10.1-52.8 40.2-98.4 84.7-128.5 44.4-30.1 98-41.1 150.7-31 52.7 10.1 98.4 40.2 128.5 84.7 62.2 91.8 38.1 217-53.7 279.3-13.5 9.2-28.1 16.6-43.4 22.3-17.5 6.5-37-2.5-43.4-20.1-6.5-17.5 2.5-37 20.1-43.4 10.1-3.7 19.9-8.7 28.8-14.8 60.9-41.3 76.9-124.4 35.6-185.3-20-29.5-50.3-49.5-85.3-56.2-34.9-6.7-70.5 0.6-100 20.6s-49.5 50.2-56.2 85.3c-6.7 35 0.6 70.5 20.5 100 15.9 23.5 38.5 41 65.2 50.7 17.6 6.3 26.7 25.7 20.3 43.3C537 508.4 524 517 510.2 517zM259.2 892.5c-18.7 0-33.8-15.1-33.8-33.8 0-137.8 59.3-302 341.6-302 51.9 0 98.5 5.5 138.5 16.5 18 4.9 28.6 23.6 23.7 41.6-4.9 18-23.5 28.5-41.6 23.7-34.2-9.3-74.8-14.1-120.7-14.1C380 624.4 293 698.9 293 858.8c0.1 18.6-15.1 33.7-33.8 33.7zM216.1 563.1c-13.8 0-26.7-8.5-31.7-22.1-6.5-17.5 2.5-37 20.1-43.4 10.1-3.7 19.8-8.7 28.8-14.8 60.9-41.3 76.9-124.4 35.6-185.3-24.9-36.7-66.2-58.6-110.6-58.6h-0.2c-13 0-25.9 1.9-38.3 5.7-17.8 5.5-36.7-4.7-42.2-22.6-5.4-17.9 4.7-36.8 22.6-42.2 18.7-5.6 38.2-8.6 57.8-8.6h0.2c66.9 0 129.2 33 166.7 88.3 30.1 44.5 41.1 98 31 150.7-10.1 52.8-40.2 98.4-84.7 128.5-13.5 9.2-28.1 16.7-43.4 22.3-3.9 1.4-7.9 2.1-11.7 2.1z" fill="#ffffff" p-id="15158" data-spm-anchor-id="a313x.7781069.0.i11" class="selected"></path><path d="M253.4 678.4c-1.9 0-3.9-0.2-5.9-0.5-26.6-4.7-56.6-7.1-89.1-7.1-20.3 0-39.8 0.9-57.8 2.8-18.7 1.6-35.2-11.7-37.1-30.2-1.9-18.6 11.6-35.2 30.2-37.1 20.3-2 42-3.1 64.6-3.1 36.5 0 70.4 2.7 100.9 8.1 18.4 3.2 30.7 20.8 27.4 39.2-2.8 16.3-17.1 27.9-33.2 27.9zM898.3 547.8c-3.8 0-7.7-0.6-11.5-2-35.1-12.6-64.8-35.7-85.7-66.7-26.3-38.8-35.9-85.5-27.1-131.6 8.9-46 35.1-85.9 73.9-112.2 18.4-12.5 38.7-21.3 60.3-26.1 18.3-3.9 36.3 7.4 40.4 25.7 4.1 18.2-7.4 36.3-25.7 40.4-13.2 2.9-25.7 8.3-37.1 16-23.9 16.2-40 40.7-45.4 68.9-5.5 28.3 0.5 57 16.6 80.9 12.9 19 31.1 33.2 52.7 41 17.6 6.3 26.7 25.7 20.4 43.3-5 13.9-18 22.4-31.8 22.4zM685.7 899.4c-18.7 0-33.8-15.1-33.8-33.8 0-114.6 47.5-252.7 273.5-260.7 19-1.6 34.3 13.9 35 32.6 0.6 18.7-14 34.4-32.6 35-142 5-208.2 66.3-208.2 193.1-0.1 18.7-15.2 33.8-33.9 33.8z" fill="#ffffff" p-id="15159" data-spm-anchor-id="a313x.7781069.0.i10" class="selected"></path></svg>          </div>
          <p>课程小组</p>
          <p class="list_p">加入单项课程讨论小组</p>
          <template #extra>
            <var-icon class="right_icon" size="30" name="chevron-right" />
          </template>
        </var-cell>
       </div>
    </div>
</template>
<script setup lang="ts">

</script>
<style lang="less" scoped>
.main{
    width: 100%;
    height: 100vh;
    background-color: white;
    .header{
        font-size: 20px;
        font-weight: 600;
        .var-elevation--3{
            box-shadow: none;
        }
    }
    .myinput{
        width: 98%;
        height: 42px;
        margin-left: 4px;
        background-color: rgb(244,245,249);
        border-radius: 20px;
        .icon{
            float: left;
            margin-left: 23px;
            margin-top: 8px;
        }
        .search{
            background-color: rgb(244,245,249);
            width: 280px;
            height: 30px;
            border: 0;
            outline: none;
            font-size: 16px;
            margin-left: 5px;
            margin-top: 5px;
        }
      }
      .ewm{
        margin-top: 11px;
        .p1{
            float: left;
            line-height: 0%;
            margin-left:111px;
            color: #bdc3c7;
        }
        .p2{
            float: left;
            line-height: 0%;
            margin-left:8px;
            font-weight: 600;
        }
        .ewmicon{
            width: 25px;
            height: 25px;
            background-color: #ecf0f1;
            border-radius: 50%;
            float: right;
            margin-top: 3px;
            margin-right: 100px;
          .ewm_icon{
            line-height: 0%;
            margin-top: 3px;
            margin-left: 3px;
        }  
        }
        
      }
      .myrow{
        width: 100%;
        height: 10px;
        background-color: #ecf0f1;
        margin-top: 56px;
      }
      .list{
        .mycell{
            --cell-min-height:80px;
            .list_p{
                font-size: 14px;
                color:#bdc3c7;
                margin-top: 26px;
                line-height: 0%;
            }
            .icon{
              float: left;
              width: 35px;
              height: 35px;
              background-color: #2659f7;
              border-radius: 5px;
              margin-top: 10px;
              .icon1{
                margin-top: 5px;
                margin-left: 7px;
              }
            }
            .icon_1{
              float: left;
              width:    35px;
              height: 35px;
              background-color: #ff7249;
              border-radius: 5px;
              margin-top: 10px;
              .icon1{
                margin-top: 5px;
                margin-left: 6px;
              }
            }
            .icon_2{
              float: left;
              width: 35px;
              height: 35px;
              background-color: #ffce6d;
              border-radius: 5px;
              margin-top: 10px;
              .icon1{
                margin-top: 5px;
                margin-left: 6px;
              }
            }
            p{
            font-size: 18px;
            font-weight: 550;
            margin-left: 50px;
            line-height: 0%;
            }
            .var--box {
            box-sizing: border-box;
            float: right;
            margin-top: -42px;
            }
            .right_icon{
              float: right;
              color:#dfe6e9;
              margin-right:-12px;
              margin-top: 5px;
            }
        }
       
      }
}
</style>